<template>
<el-container>
  <el-header>
    <el-header class="auto"><goback :content="content"></goback></el-header>
  </el-header>

  <el-main>
    <el-form :inline="true" :model="form" class="demo-form-inline">

      <el-form-item>
        <el-select v-model="form.status" placeholder="审批状态" @change="getList">
          <el-option :label="status" :value="k" v-for="(status,k) in status_list" :key="k"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-input v-model="form.name" placeholder="项目名称"></el-input>
      </el-form-item>

      <el-form-item>
        <el-input v-model="form.batch_id" placeholder="流水号"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
      </el-form-item>
    </el-form>

<!--    table-->
    <el-table
      :data="list"
      style="margin-top: 20px;"
    >
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="项目名称" prop="projectName"></el-table-column>
      <el-table-column label="流水号" prop="batch_id"></el-table-column>
      <el-table-column label="付款名称" prop="cw_title"></el-table-column>

<!--      <el-table-column label="财务类型" prop="paytype"></el-table-column>-->
      <el-table-column
        align="left"
        header-align="center"
      >
        <template slot="header" slot-scope="scope">
          <el-select v-model="form.paytype" placeholder="付款类型" @change="getList">
            <el-option :label="item.name" :value="item.paytype" v-for="(item,i) in fincial_type" :key="i"></el-option>
          </el-select>
        </template>
        <template slot-scope="scope">
          {{scope.row.type_name}}申请
        </template>
      </el-table-column>

      <el-table-column label="金额" prop="money"></el-table-column>
      <el-table-column label="创建人" prop="username"></el-table-column>
      <el-table-column label="更新时间" prop="updated_at"></el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <div class="frow fcenter" style="align-items: flex-end;">
            <div v-if="!form.status">
              <el-badge is-dot class="item">
                <el-button type="primary" @click="edit(scope.row)" size="mini">编辑</el-button>
              </el-badge>
            </div>
            <div v-else> <el-button type="primary" @click="edit(scope.row)" size="mini">编辑</el-button></div>
            <div style="margin-left: 10px;"> <el-button type="danger" @click="del(scope.row.id)" size="mini">删除</el-button></div>
          </div>
        </template>
      </el-table-column>

    </el-table>

  </el-main>

  <el-footer>

    <!--    分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="form.page_size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </el-footer>
</el-container>
</template>

<script>
    import goback from "../common/goback";
    import search from "../common/search";
    import {getFinanceList,delFinance} from '@/apilist/Finance'
    export default {
        name: "financialList",
        data(){
            return {
                content: '财务列表',
                form: {
                    name: '',
                    title: '',
                    created_user: '',
                    status: 0,
                    date: '',
                    batch_id: '',
                    page: 1,
                    page_size: 10,
                    paytype: '',
                },
                status_list: ['备审','待审','已审'],
                fincial_type: [
                    {name: '差旅申请',paytype: 1},
                    {name: '采买申请',paytype: 2},
                    {name: '报销申请',paytype: 3},
                    {name: '付款申请',paytype: 4},
                    {name: '发票申请',paytype: 5},
                    {name: '借款申请',paytype: 6},
                    {name: '押金申请',paytype: 7},
                    {name: '临款申请',paytype: 9},
                ],
                list: [],
                total: 0,
            }
        },
        components: {goback,search},
        methods:{
            goBack(){
                this.$router.push('/home');
            },
            getList(){
                getFinanceList(this.form).then(res => {
                    this.list = res.data.data
                    this.total = res.data.total
                })
            },
            handleSizeChange(val){
                this.form.page_size = val
                this.getList()
            },
            handleCurrentChange(val){
                this.form.page = val
                this.getList()
            },
            edit(row){
               this.$router.push({
                   path: '/financial/edit',
                   query:{
                       id: row.id,
                       title: row.cw_title
                   },
               })

            },
            del(id){
                this.$confirm('此操作将永久删除该财务记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delFinance({id: id}).then(res => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getList()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }

        },

        mounted() {
          this.getList()
        }
    }
</script>

<style scoped>
.item{
  margin-top: 5px;
  /*margin-right:20px ;*/
}
</style>
